<template>

  <div class="el-tree">
    <div style="width: 100%; text-align: center">
      <label>{{label}}</label>
    </div>
    <el-table
      :data="tableData.filter(data => !search || data.key.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column :label="label" align="center">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-link :href="scope.row.value" target="_blank">{{scope.row.key}}</el-link>
        </template>
      </el-table-column>
    </el-table>

  </div>

</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
	import {getPartitions} from "@/api";

	export default {
		name: "Partition",
		methods: {
			tableRowClassName({row, rowIndex}) {
				if (rowIndex % 2 === 0) {
					return 'warning-row';
				} else {
					return 'success-row';
				}
			}
		},
		data() {
			return {
				label: '国际交流展区',
				areaId: '',
				tableData: [],
				search: '',

				labelMap: {
					'tradition_energy': '传统能源展区',
					'new_material': '新材料展区',
					'green_energy': '绿色能源展区',
					'energy_technology_innovation': '能源科技创新展区',
					'new_energy_consumption': '新能源消费展区',
					'new_energy': '新能源展区',
					'electric_power': '电力展区',
					'natural_gas': '天然气展区',
					'regional_cooperation': '区域合作展区',
					'international_exchange': '国际交流展区',
				}
			}
		},


		created: function () {
			console.info(this.$route.query.area);
			this.areaId = this.$route.query.area;
			if (!this.areaId) {
				this.$message.error("未找到用户区域编号");
				return;
			}
			this.label = this.labelMap[this.areaId];
			getPartitions(this.areaId).then(res => {
				this.tableData = res.data;
			})

		},
	}

</script>

<style scoped>

</style>

<style type="text/scss">
  /*覆盖Element的样式*/
  span {
    .el-tree-node__expand-icon {
      position: absolute;
      top: 0;
      left: 0;
      height: 20px;
      width: 20px;
      color: hotpink;
      z-index: 999;
    }

    .custom-tree-node {
      padding: 10px 0;
    }
  }
</style>
